<div class="fui-sub-menu-head" (click)="toggleOpen()" [class.active]="active" [style.padding-right.px]="headPaddingRight">
  <svg class="icon" *ngIf="icon" [fuiIcon]="icon"></svg>
  <ng-container *ngIf="!menuTitleTemplate">
    <div *ngIf="!collapsed" class="fui-sub-menu-title">{{menuTitle}}</div>
  </ng-container>
  <ng-container *ngIf="menuTitleTemplate">
    <ng-container *ngTemplateOutlet="menuTitleTemplate; context: context"></ng-container>
  </ng-container>
  <svg class="caret" *ngIf="mode === 'foldable' && !collapsed" fuiIcon="angle-up" [class.down]="open"></svg>
</div>
<div
  class="fui-sub-menu-children"
  [style.background]="background"
  [@showHide]="open"
  *ngIf="mode === 'foldable' && !collapsed && open"
>
  <ng-container *ngTemplateOutlet="childrenTemplate"></ng-container>
</div>
<ng-container *ngIf="mode === 'float' || collapsed">
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="overlayOrigin"
    [cdkConnectedOverlayHasBackdrop]="false"
    (detach)="hide()"
    (positionChange)="onPositionChange($event)"
    [cdkConnectedOverlayPositions]="positions"
    [cdkConnectedOverlayOpen]="visible | async"
  >
  <div
    class="fui-sub-menu-children float"
    [@showHide]="visible | async"
    (mouseenter)="mouseenterFloat()"
    (mouseleave)="mouseleaveFloat()"
   >
    <ng-container *ngTemplateOutlet="childrenTemplate"></ng-container>
  </div>
  </ng-template>
</ng-container>
<ng-template #childrenTemplate>
  <ng-content></ng-content>
</ng-template>
